<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-col :span="25">
        <el-form-item label="股票代码">
          <el-input v-model="formInline.stockCode" clearable placeholder="股票代码"></el-input>
        </el-form-item>
        <el-form-item label="股票名称">
          <el-input v-model="formInline.stockName" clearable placeholder="股票名称"></el-input>
        </el-form-item>
        <el-form-item label="最新价">
          <el-input v-model="formInline.latestPrice" clearable placeholder="最新价"></el-input>
        </el-form-item>
      </el-col>
      <br>
      <el-col :span="25">
        <el-form-item label="涨跌额">
          <el-input v-model="formInline.rangeNum" clearable placeholder="涨跌额"></el-input>
        </el-form-item>
        <el-form-item label="涨跌幅">
          <el-input v-model="formInline.priceLimit" clearable placeholder="涨跌幅"></el-input>
        </el-form-item>
        <el-form-item label="买入价">
          <el-input v-model="formInline.bidPrice" clearable placeholder="买入价"></el-input>
        </el-form-item>
      </el-col>
      <br>
      <el-col :span="25">
        <el-form-item label="卖出价">
          <el-input v-model="formInline.sellingPrice" clearable placeholder="卖出价"></el-input>
        </el-form-item>
        <el-form-item label="昨日收盘价">
          <el-input v-model="formInline.yesterdayPrice" clearable placeholder="昨日收盘价"></el-input>
        </el-form-item>
        <el-form-item label="今日开盘价">
          <el-input v-model="formInline.todayPrice" clearable placeholder="今日开盘价"></el-input>
        </el-form-item>
      </el-col>
      <br>
      <el-col :span="25">
        <el-form-item label="今日最高价">
          <el-input v-model="formInline.todayMaxprice" clearable placeholder="今日最高价"></el-input>
        </el-form-item>
        <el-form-item label="今日最低价">
          <el-input v-model="formInline.todayMinprice" clearable placeholder="今日最低价"></el-input>
        </el-form-item>
        <el-form-item label="成交量">
          <el-input v-model="formInline.tradingVolume" clearable placeholder="成交量"></el-input>
        </el-form-item>
      </el-col>
      <br>
      <el-col :span="25">
        <el-form-item label="成交额">
          <el-input v-model="formInline.volumeBusiness" clearable placeholder="成交额"></el-input>
        </el-form-item>
        <el-form-item label="股票代码">
          <el-input v-model="formInline.stockCode" clearable placeholder="股票代码"></el-input>
        </el-form-item>
        <el-form-item label="成交时间">
          <el-date-picker
              v-model="formInline.closingDate"
              placeholder="选择日期时间"
              type="datetime">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <br>
      <el-col :span="25">
        <el-form-item>
          <el-button type="primary" @click="list">查询/更新</el-button>
          <el-button type="success" @click="timeSql">实时更新</el-button>
        </el-form-item>
      </el-col>
    </el-form>
    <!-- 根据 loading 状态显示加载图标 -->
    <template>
      <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            label="序号"
            prop="id"
            width="50">
        </el-table-column>
        <el-table-column
            label="股票代码"
            prop="stockCode"
            width="100">
        </el-table-column>
        <el-table-column
            label="股票名称"
            prop="stockName"
            width="120">
        </el-table-column>
        <el-table-column
            label="最新价"
            prop="latestPrice"
            sortable
            width="90">
        </el-table-column>
        <el-table-column
            label="涨跌额"
            prop="rangeNum"
            sortable
            width="90">
        </el-table-column>
        <el-table-column
            label="涨跌幅"
            prop="priceLimit"
            width="80">
          <template v-slot="s">
            {{ s.row.priceLimit }}%
          </template>
        </el-table-column>
        <el-table-column
            label="买入价"
            prop="bidPrice"
            width="80">
        </el-table-column>
        <el-table-column
            label="卖出价"
            prop="sellingPrice"
            width="80">
        </el-table-column>
        <el-table-column
            label="昨日收盘价"
            prop="yesterdayPrice"
            width="100">
          <template v-slot="s">
            {{ s.row.yesterdayPrice }}万
          </template>
        </el-table-column>
        <el-table-column
            label="今日开盘价"
            prop="todayPrice"
            width="100">
          <template v-slot="s">
            {{ s.row.todayPrice }}万
          </template>
        </el-table-column>
        <el-table-column
            label="今日最高价"
            prop="todayMaxprice"
            width="100">
          <template v-slot="s">
            {{ s.row.todayMaxprice }}万
          </template>
        </el-table-column>
        <el-table-column
            label="今日最低价"
            prop="todayMinprice"
            width="100">
          <template v-slot="s">
            {{ s.row.todayMinprice }}万
          </template>
        </el-table-column>
        <el-table-column
            label="成交量"
            prop="tradingVolume"
            width="80">
        </el-table-column>
        <el-table-column
            label="总成交额"
            prop="volumeBusiness"
            width="80">
        </el-table-column>
        <el-table-column
            label="股票代码"
            prop="stockCode"
            width="80">
        </el-table-column>
        <el-table-column
            label="最新成交时间"
            prop="closingDate"
            width="160">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleClick(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-size="size"
          :total="total"
          background
          layout="total, prev, pager, next"
          @current-change="goPage">
      </el-pagination>
    </template>
  </div>

</template>

<script>
export default {
  name: "StockView",
  data() {
    return {
      tableData: [],
      total: 0,
      size: 10,
      pageNum: 1,
      formInline: {},
      loading: ''
    }
  }, methods: {
    goPage(pageNum) {
      this.pageNum = pageNum;
      //this.list();
      this.list1();
    },
    list() {
      this.loading = true;
      this.axios.post("/stockservice/stock/list?pageNum=" + this.pageNum + "&pageSize=" + this.size, this.formInline).then(res => {
        this.loading = false;
        this.total = res.data.data.total;
        this.tableData = res.data.data.list;
      })
    },
    handleClick(id) {
      sessionStorage.setItem("stock_id", id)
      this.$router.push("/stash")
    }, list1() {
      this.axios.post("/stockservice/stock/list1?pageNum=" + this.pageNum + "&pageSize=" + this.size).then(res => {
        this.loading = false;
        this.total = res.data.data.total;
        this.tableData = res.data.data.list;
      })
    },
    timeSql() {
      // 初始设置 loading 状态为 true，表示正在加载
      this.loading = true;
      this.list1();
      this.axios.post("/stockservice/timeSql/updateSql").then(res => {
        // 加载完成，设置 loading 状态为 false
        this.loading = false;
        if (res.data.code == 200) {
          this.$message.success("更新成功");
          this.list();
        } else {
          this.$message.error("更新失败")
        }
      })
    }
  }, created() {
    this.list1();

  }
}
</script>

<style scoped>

</style>
